﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件列表页</title>
    <link rel="stylesheet" href="../assets/fonts/iconfont.css">
    <link rel="stylesheet" href="../assets/css/base.css">
    <link rel="stylesheet" href="../assets/css/sn-style.css">
    <link rel="stylesheet" href="../assets/build/swiper/swiper.jquery.min/swiper.min.css">
    <link rel="stylesheet" href="../assets/css/event-list.css">
</head>

<body>
    <!--header引入区域-->
    <div class="headerbgc">
        <div style="border-bottom:1px solid rgb(228, 228, 228);">
            <div class="head">
                <a href="#" class="logoImg"> <img src="./../assets/image/logo.svg" alt=""></a>
                <p>
                    <a href="#">首页</a>
                    <a href="#" class="nav-active">资讯</a>
                    <a href="#">素材库</a>
                    <a href="#">商业地产</a>
                    <a href="#">供应商</a>
                </p>
                <div class="search-head">
                    <select>
                        <option value="">资讯</option>
                        <option value="">商场</option>
                        <option value="">服务商</option>
                    </select>
                    <input type="text" name="" value="">
                    <a href="#"><img src="./../assets/image/head-search.svg" alt=""></a>
                </div>
                <span class="headLink"><a href="./login/register.html">注册</a><a href="./login/login.html" class="login-link">登录</a></span>
            </div>
        </div>
    </div>
    <div style="height:80px;"></div>
    <div class="container layout sn-clr">
        <div class="event">
            <h3 class="event-title">全部活动资讯</h3>
            <div class="event-date">
                <a href=""><i class="iconfont icon-youjiantou"></i></a>
                <a href=""><i class="iconfont icon-web__jiantou_zuo"></i></a>
                <span>2017/01/28</span>
                <a href=""><i class="iconfont icon-web__jiantou_you"></i></a>
                <a href=""><i class="iconfont icon-zuojiantou"></i></a>
            </div>
            <div class="list-title">
                <span style="background-color:rgb(255, 153, 51);color:#FFF;">星期天</span>
                <span>星期一</span>
                <span>星期二</span>
                <span>星期三</span>
                <span>星期四</span>
                <span style="background-color:rgb(255, 227, 170);color:#FFF;">星期五</span>
                <span style="background-color:rgb(255, 153, 51);color:#FFF;">星期六</span>
            </div>
            <div class="event-list">
                <div class="event-index">
                    <p>1</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>2</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>3</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>4</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>5</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>6</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>7</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>8</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>9</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>10</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>11</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>12</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>13</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>14</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>15</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>16</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>17</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>18</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>19</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>20</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>21</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>22</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>23</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>24</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>25</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>26</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>27</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>28</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>29</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>30</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>31</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>1</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>2</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>3</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="event-index">
                    <p>4</p>
                    <a href=""><img src="./../assets/image/pic-detail.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-detail2.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/mall-title.jpg" alt=""></a>
                    <a href=""><img src="./../assets/image/pic-right.png" alt=""></a>
                </div>
                <div class="hover-div sn-hide">
                    <a href=""><img src="./../assets/image/collect3.jpg" alt=""></a>
                    <a href=""> <h3>马来西亚开斋节Hari Raya festival历年总汇新加坡</h3></a>
                    <p>2018/02/08-2018/02/12</p>
                </div>
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="layout">
            <div class="left-bot">
                <img src="./../assets/image/bot-logo.svg" alt="">
                <p><span style="margin-right:30px;">关于我们</span><a href="#">关于我们</a>|<a href="#">关于我们</a>|<a href="#">关于我们</a>|<a href="#">关于我们</a></p>
                <p><span style="margin-right:30px;">新手入门</span><a href="#">注册新用户</a>|<a href="#">用户帮助中心</a></p>
                <p><span style="margin-right:30px;">网站规则</span><a href="#">网站服务协议</a>|<a href="#">网站注册协议</a>|<a href="#">网站版权声明</a></p>
                <p style="color:#BCBCBC;">©ALIMAMA MUX, powered by alimama THX.法律声明<br>
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源，商业媒体及纸媒请先联系：sangxing@taobao.com</p>
            </div>
            <div class="right-bot">
                <h3>有情链接</h3>
                <p class="sn-clr"><span>友情链接1</span><span>友情链接1</span><span>友情链接1</span><span>友情链接1</span><span>友情链接1</span><span>友情链接1</span><span>友情链接1</span><span>友情链接1</span><span>友情链接1</span></p>
                <div class="circle">
                    <img src="./../assets/image/bot-circle.png" alt="">
                    <img src="./../assets/image/bot-circle.png" alt="">
                    <img src="./../assets/image/bot-circle.png" alt="">
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./../assets/build/jquery/dist/jquery.js"></script>
<script>
$('.event-index').on('mouseover','img',function(){
    $('.hover-div').show().css('left',event.clientX).css('top',event.clientY +5)
})
$('.hover-div').on('mouseover',function(){
    $('.hover-div').show();
})
$('.event-index').on('mouseout','img',function(){
    $('.hover-div').hide();
})
$('.hover-div').on('mouseout',function(){
    $('.hover-div').hide();
})
</script>
</html>